<template>
  <div class="swiperCon white_bg">
    <mt-swipe :auto="4000">
      <mt-swipe-item v-for="(item,key) in bannerArry" :key="key">
        <img v-if="item.banner"
             @click="jumpFind(item.banner.linkMchtId,item.banner.linkDocId, item.banner.linkUrl, item)"
             v-lazy="item.picUrl">
        <img v-if="!item.banner" v-lazy="item.picUrl">
      </mt-swipe-item>
    </mt-swipe>
    <div class="elliptical white_bg" v-if="divStyle"></div>
  </div>
</template>

<script>
  import {
    Swipe,
    SwipeItem,
    Toast
  } from 'mint-ui';

  export default {
    name: 'slideImg',
    data() {
      return {
        swiperOption: {
          autoplay: 3000,
          direction: 'horizontal',
          setWrapperSize: true,
          autoHeight: true,
          pagination: '.swiper-pagination',
          debugger: true,
          loop: true,
        }
      }
    },
    props: ["divStyle", "bannerArry"],
    created: function () {

    },
    computed: {
      swiper() {
        return this.$refs.mySwiper.swiper
      }
    },
    mounted() {},
    methods: {
      //点击跳转到发现详情
      jumpFind: function (mchtid, id, linkUrl, item) {
        // linkType
        if (item.banner.linkType === 'url') {
          location.href = item.banner.linkUrl
          return
        }
        if (item.banner.linkType === 'inner') {
          let link = item.banner.linkUrl.split('?')
          let query = link[1].split('=')
          this.$router.push({
            name: link[0],
            query: {
              [query[0]]: query[1]
            }
          })
          return
        }
        if (item.banner.linkType === 'mcht') {
          this.$router.push({'path': '/merchDetail',query:{mchtId:mchtid}});
        }
        if (!id && !mchtid) {
          Toast({
            message: '暂无详情',
            duration: 1000
          });
        }
        if (id) {
          this.$router.push({
            'path': '/findDetail',
            query: {
              docId: id,
              img: item.picUrl
            }
          });
        }

      },
    }
  }
</script>
<style>
  .swiperCon {
    width: 100%;
    height: 10.6rem;
    box-sizing: border-box;
    /*padding: 0 0.667rem;*/
  }

  .swiperCon .swiper-slide img {
    width: 100%;
  }

  .swiperCon {
    position: relative;
    overflow: hidden;
  }

  .elliptical {
    width: 120%;
    height: 3rem;
    position: absolute;
    bottom: -1.5rem;
    left: -10%;
    z-index: 1;
    border-radius: 70%;
  }

  .swiperCon .swiper-container-horizontal > .swiper-pagination-bullets {
    bottom: 1.6rem;
    height: 1.1rem;
    line-height: 1.1rem;
    right: .667rem;
    left: auto;
    width: 6rem;
    background: rgba(54, 53, 53, .5);
    border-radius: 1rem;
  }

  .swiperCon .swiper-pagination-bullet {
    background: #bab8b8;
    opacity: 1;
  }

  .swiperCon .swiper-pagination-bullet-active {
    background: #ec4e8a;
  }

  .swiperCon .mint-swipe {
    background: #bab8b8;
  }

  .swiperCon .mint-swipe img {
    width: 100%;
    height: 100%;
  }

  .swiperCon .mint-swipe-indicators {
    left: auto;
    right: 0.6rem;
    bottom: 1.67rem;
    /*background: rgba(54,53,53,.5);*/
    padding: 0 0.667rem;
    border-radius: 1rem;
    transform: translateX(0);
  }

  .swiperCon .mint-swipe-indicator {
    background: #ffffff;
    opacity: 1;
  }

  .swiperCon .mint-swipe-indicator.is-active {
    background: #ec4e8a;
  }

  .swiperCon .mint-swipe-indicator {
    width: 0.667rem;
    height: 0.667rem;
    margin: 0 0.3rem;
  }
</style>
